<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view class="grace-body" slot="gBody">
			<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scrolltolower="scrollend" @scroll="scroll"
			 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
				<graceEmpty v-if="list == 'empty'">
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">本栏目暂无数据</text>
				</graceEmpty>
				<view class="grace-list">
					<block v-for="(item, index) in list" :key="index" v-if="list != 'empty'">
						<view class="grace-list-items" @tap="goDetail(item.id)">
							<view class="grace-list-image grace-relative">
								<image class="grace-list-image" src="../../static/img/center/speaker.png" mode="widthFix"></image>
								<view class="grace-badge-point"></view>
							</view>
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title">
									<text class="grace-list-title-text">{{item.name}}</text>
									<view class="grace-list-title-desc">2020-10-11</view>
								</view>
								<view class="grace-list-body-desc">{{item.desc}}</view>
							</view>
						</view>
					</block>
				</view>
				<graceLoading :loadingType="loadingTypes"></graceLoading>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceFlex from "../../graceUI/components/graceFlex.vue";
import graceLoading from "../../graceUI/components/graceLoading.vue";
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
import graceReload from '../../graceUI/components/graceReload.vue';
var page = 1;
export default {
	data() {
		return {
			mainHeight: 600,
			// 每个选项卡对应的分页
			// 加载状态
			// 每个滚动区域的滚动值
			scrollTops: 1,
			loadingTypes:3,
			list:[],
		}
	},
	onLoad:function(){
		this.paginate();
	},
	methods:{
		//查询反馈意见
		async paginate(isReload) {
			let data = await this.$apis.paginateNewsItem({page:page});
			let list = data.data;
			console.log( list );
			if ( list.length > 0 ) {
				// 第一页
				if ( page == 1) {
					this.list = list;
				}
				// 之后的加载页
				else {
					this.list = this.list.concat(list);
				}
				// 页码增加
				page++;
				setTimeout(() => {
					this.loadingTypes = 3;
				}, 300)
			} else if ( this.list.length == 0 ) {
				console.log('empty');
				this.list = 'empty';
				this.loadingTypes = 4;
			} else {
				console.log('nomore');
				this.loadingTypes = 2;
			}
			if (isReload) {
				setTimeout(() => {
					this.$refs.graceReload.endReload();
				}, 300)
			}
		},
		// 加载更多
		scrollend: function(e) {
			// 判断加载状态避免多次滚动时有加载尚未完成
			if (this.loadingTypes == 2 || this.loadingTypes == 4) {
				return false;
			}
			console.log('loadmore.....');
			this.getNews();
		},
		scroll: function(e) {
			this.scrollTops = e.detail.scrollTop;
		},
		touchstart: function(e) {
			var touchObj = {
				scrollTop: this.scrollTops,
				moveY: e.changedTouches[0].pageY
			};
			this.$refs.graceReload.touchstart(touchObj);
		},
		touchmove: function(e) {
			var touchObj = {
				scrollTop: this.scrollTops,
				moveY: e.changedTouches[0].pageY
			};
			this.$refs.graceReload.touchmove(touchObj);
			
		},
		touchend: function(e) {
			var touchObj = {
				scrollTop: this.scrollTops,
				moveY: e.changedTouches[0].pageY
			};
			this.$refs.graceReload.touchend(touchObj);
		},
		// 下拉刷新
		reload: function() {
			page = 1;
			this.loadingTypes = 3;
			this.paginate(1);
		},
		//打开报名详情
		goDetail:function(id){
			this.$mRouter.push({
				route: this.$mRoutesConfig.signup,
				query:{id:id}
			})
		}
	},
	components:{
		gracePage, 
		graceFlex,
		graceEmpty,
		graceLoading,
		graceReload,
	}
}
</script>
<style>
.grace-news-btn{display:block; line-height:32rpx; font-size:26rpx;width:160rpx;padding-left: -30rpx;}
</style>